<template>
	<view class="pad-10">
		<!-- 医技预约展示详细页面并跳转到修改，其实就是跳转到预约页面 -->
		<view class="qr-code">
			<view>
				<QRCode ref="qrcode" onval :val="item.patId" :size="200" :load-make="true" :show-loading="false">
				</QRCode>
				<view class="mar-10">门诊号：{{item.patId}}</view>
			</view>
		</view>
		<view class="item">
			<view class="between center">
				<view class="border-col">预约信息</view>
				<view class="book-status">已预约</view>
			</view>
			<view class="between mar-10-0">
				<view class="item-title">检查项目</view>
				<view>{{item.name}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">就诊人</view>
				<view>{{item.patName}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">检查院区</view>
				<view>{{item.campusName}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">就诊科室</view>
				<view>{{item.departmentName}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">就诊位置</view>
				<view>{{item.departmentAddress}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">预约时间</view>
				<view>{{item.visitTime}}</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">检查序号</view>
				<view class="fle-1" v-if="item.visitNo">{{item.visitNo}}</view>
				<view class="fle-1 color-red" v-else>扫描门诊号报道成功后，点击刷新按钮
					可以查看检查序号
				</view>
			</view>
			<view class="border-row"></view>
			<view class="between mar-10-0">
				<view class="item-title">注意事项</view>
				<view>{{item.describe}}</view>
			</view>
			<view class="border-row"></view>
			<view class="btn-fresh-view">
				<view class="btn-fresh" @click="fresh">刷新</view>
			</view>
			<button class="btn-confirm" @click="openDialog">修改预约</button>
		</view>
		<DialogVue :show="showDialog" @close="showDialog=false" @confirm="confirm">
			<view class="text-center">
				<view class="color-red">{{tips}}</view>
			</view>
		</DialogVue>
	</view>
</template>

<script>
	import QRCode from '../../../components/QrCode/tki-qrcode.vue'
	import DialogVue from '../../../components/Dialog/Dialog.vue'
	import {
		medicalTechnologyId
	} from '../../../api/medicalTechnology'
	export default {
		components: {
			QRCode,
			DialogVue
		},
		data() {
			return {
				item: "",
				showDialog: false,
				tips: '',
			}
		},
		onLoad(e) {
			this.item = JSON.parse(e.item)
			console.log(this.item)
		},
		methods: {
			openDialog() {
				this.tips = "只能修改预约时间"
				this.showDialog = true
			},
			confirm() {
				// 日期必须大于当天才能修改
				if (!this.isFutureDate(this.item.visitTime)) {
					this.$u.toast('预约日期必须大于今天才可修改')
					return
				}
				uni.navigateTo({
					url: "/pages/Home/ServePatient/MedicalTechnologyBookPage?item=" + JSON.stringify(this.item)
				})
			},
			isFutureDate(inputDate) {
				const today = new Date().setHours(0, 0, 0, 0);
				const input = new Date(inputDate).setHours(0, 0, 0, 0);
				return input > today;
			},
			fresh() {
				medicalTechnologyId(this.item).then(res => {
					this.item = res;
					if (this.item.visitTime) {
						this.item.visitTime = this.item.visitTime.split(" ")[0]
					}
				})
			}
		}
	}
</script>

<style scoped>
	.qr-code {
		text-align: center;
		background-color: white;
		padding: 20px 0 10px 0;
		border-radius: 10px;
	}

	.item {
		background-color: white;
		border-radius: 10px;
		padding: 10px;
		margin: 10px 0;


		.item-title {
			width: 100px;
			color: gray;
		}

		.book-status {
			background: #4ad49a;
			color: #fff;
			border-radius: 8px;
			padding: 4px 18px;
			right: 8px;
			width: 90px;
			text-align: center;
			white-space: nowrap;
		}

		.border-row {
			width: 100%;
			height: 1px;
			border: 1px solid rgb(221, 227, 229);
			margin: 10px 0;
		}

		.btn-fresh-view {
			position: relative;
			height: 20px;
		}

		.btn-fresh {
			width: 100px;
			background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
			color: #fff;
			border-radius: 44rpx;
			text-align: center;
			box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
			border: none;
			position: absolute;
			right: 0;
			padding: 5px;

		}
	}
</style>